<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>父子通信</title>
    <script src='./vue.global.js'></script>
</head>
<body>
    <div id='app'>
        <!-- <blog :title="title" :fs="fs" @enlarge="onEnlarge"></blog> -->

        <!-- 
        :title="title" 给子组件注入props
        :fs="fs"       给子组件注入props
        @enlarge="fs += $event"  处理子组件发送的自定义事件 
        enlarge=事件名字 $event=事件对象=事件携带的数据
         -->
        <blog :title="title" :fs="fs" @enlarge="fs += $event"></blog>
    </div>

    <!-- 
    父传子 props-down
    子传父 event-up
     -->
    <script>
        const app = Vue.createApp({
            data(){
                return {
                    title:"你老婆跟人跑了！！！",
                    fs:20
                }
            },
            methods:{
                // 自定义事件处理函数 入参为事件对象/this.$event 即事件携带的数据
                onEnlarge(e){
                    console.log("onEnlarge:e=",e);
                    this.fs += e
                }
            }
        })

        /* 定义组件 */
        app.component("blog",{
            // 声明接收来自父组件的props
            props:["title","fs"],

            // 声明向父组件发送的自定义事件
            emits:["enlarge"],

            template:`
            <div class="blog">
                <button @click="$emit('enlarge',2)">放大</button>
                <h4 :style="{fontSize:fs+'px'}">{{title}}</h4>
            </div>
            `
        })
        
        app.mount('#app')

    </script>
</body>
</html>